<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i>
          项目报备
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select v-model="ser.state" class="handle-select mr10">
          <el-option :key="0" label="全部" :value="0"></el-option>
          <el-option :key="1" label="待排期" :value="1"></el-option>
          <el-option :key="2" label="已排期" :value="2"></el-option>
          <el-option :key="3" label="实施中" :value="4"></el-option>
          <el-option :key="4" label="已完结" :value="8"></el-option>
          <el-option :key="5" label="挂起" :value="16"></el-option>
          <template #prefix>项目状态</template>
        </el-select>
        <el-input v-model="ser.key" placeholder="项目名称" style="width: 260px" class="handle-input mr10" clearable>
          <template #prepend>项目名称</template>
        </el-input>
        <el-date-picker v-model="ser.start" type="date" placeholder="开始日期" class="handle-input mr10" value-format="YYYY-MM-DD"></el-date-picker>
        <el-date-picker v-model="ser.end" type="date" placeholder="结束日期" class="handle-input mr10" value-format="YYYY-MM-DD"></el-date-picker>
        <el-button type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
        <el-button @click="addClick">添加</el-button>
        <el-button @click="exportClick">导出</el-button>
      </div>

      <el-table :data="datas" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <!-- <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column> -->
        <el-table-column prop="name" label="项目名称"></el-table-column>
        <el-table-column prop="saleMsg.trueName" label="销售人员"></el-table-column>
        <el-table-column prop="ownerShip" label="项目归属"></el-table-column>
        <el-table-column label="项目类型">
          <template #default="scope">{{ scope.row.projectType ? scope.row.projectType.name : '无' }}</template>
        </el-table-column>
        <el-table-column label="施工人员">
          <template #default="scope">{{ (scope.row.staffsList || []).map((z) => z.userName).join('、') }}</template>
        </el-table-column>
        <el-table-column prop="customerName" label="客户名称" v-if="bigScreen"></el-table-column>
        <el-table-column prop="linker" label="联系人" v-if="bigScreen"></el-table-column>
        <el-table-column prop="phone" label="联系电话" v-if="bigScreen"></el-table-column>
        <el-table-column prop="planStartDate" label="合同时间" :formatter="formatDate"></el-table-column>
        <el-table-column prop="address" label="地址" v-if="bigScreen"></el-table-column>
        <el-table-column prop="contractState" label="合同情况" v-if="bigScreen"></el-table-column>
        <el-table-column prop="approveState" label="审批情况" v-if="bigScreen"></el-table-column>
        <el-table-column prop="staffDays" label="人天消耗"></el-table-column>
        <el-table-column prop="fromDate" label="实际开始时间" :formatter="formatDate"></el-table-column>
        <el-table-column prop="toDate" label="实际结束时间" :formatter="formatDate"></el-table-column>
        <el-table-column label="进度" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.stateType">{{ scope.row.rate || '0' }}%</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.stateType">{{ scope.row.stateName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createDate" label="报备时间" :formatter="formatDate"></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button type="text" icon="el-icon-edit" :disabled="scope.row.state != 1" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" icon="el-icon-delete" :disabled="scope.row.state != 1" class="red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="ser.page" :page-size="ser.row" :total="total" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
    <addForm ref="addFormRef" @search="search"></addForm>
  </div>
</template>
<script>
import api from '../../api/prepare'
import addForm from './add.vue'
import { toDate } from '../../utils/common'
export default {
  components: {
    addForm,
  },
  data() {
    return {
      ser: {
        state: 0,
        start: '',
        end: '',
        key: '',
        page: 1,
        row: 10,
      },
      datas: [],
      total: 0,
      bigScreen: window.innerWidth > 768,
    }
  },
  computed: {
    pageTotal() {
      return Math.ceil(this.total / this.ser.row)
    },
  },
  methods: {
    handlePageChange(page) {
      Object.assign(this.ser, { page })
      this.search()
    },
    searchClick() {
      this.ser.page = 1
      this.search()
    },
    search() {
      api.search(this.ser).then(({ msg }) => {
        if (!msg) return
        const { items, total } = msg
        this.datas = items.map((it) => {
          switch (it.state) {
            case 0:
              it.stateType = ''
              break
            case 1:
              it.stateType = 'danger'
              break
            case 2:
              it.stateType = 'warning'
              break
            case 4:
              it.stateType = 'primary'
              break
            case 8:
              it.stateType = 'success'
              break
            case 16:
              it.stateType = 'info'
              break
          }
          return it
        })
        this.total = total
      })
    },
    addClick() {
      this.$refs['addFormRef'].showAdd()
    },
    formatDate(row, { property }) {
      return toDate(row[property])
    },
    handleEdit(row) {
      this.$refs['addFormRef'].showEdit(row.id)
    },
    handleDelete(row) {
      this.$confirm('是否确定要删除', '提示').then(() => {
        api.remove(row.id).then(() => {
          this.search()
          this.$message.warning('删除成功')
        })
      })
    },
    exportClick() {
      api.export(this.ser).then((response) => {
        const url = window.URL.createObjectURL(new Blob([response]))
        const a = document.createElement('a')
        a.href = url
        a.download = 'data.xlsx'
        document.body.appendChild(a)
        a.click()
        document.body.removeChild(a)
      })
    },
  },
  mounted() {
    this.searchClick()
  },
}
</script>
<style scoped>
.handle-box {
  gap: 10px;
}
</style>
